<template>
    <div class="Login_Container">
        <div class="form_div">
            <div class="content">
                <h3 class="tips">系统登录</h3>
                <div class="warp">
                    <el-form ref="form" :model="form" :rules="rules" label-position="top" class="login_form" @submit.native.prevent>
                        <el-form-item label="用户名" prop="username">
                            <el-input 
                                type="text"
                                clearable
                                placeholder="请输入用户名"
                                @keyup.enter.native="handleSubmit"
                                v-model="form.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input 
                                type="password"
                                clearable
                                placeholder="请输入密码"
                                @keyup.enter.native="handleSubmit"
                                v-model="form.password"></el-input>
                        </el-form-item>
                        <el-form-item class="remember">
                            <el-checkbox v-model="isRemember">记住密码</el-checkbox>
                        </el-form-item>
                        <el-button 
                            class="login_btn" 
                            type="primary" 
                            size="medium" 
                            @click.stop="handleSubmit"
                            :loading="isload">
                            登录
                        </el-button>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {Encrypt, Decrypt} from '@/utils/tools';
export default {
    data(){
        const validPassword = (rule, value, callback) => {
            var reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;
            if (!this.form.password) {
                callback(new Error('密码不能为空'))
            } else {
                if (reg.test(this.form.password)) {
                callback()
                } else {
                callback(new Error('请检查密码格式，是否正确'))
                }
            }
        }

        const validUsername = (rule, value, callback) => {
            var reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;
            if (!this.form.username) {
                callback(new Error('用户名不能为空'))
            } else {
                if (reg.test(this.form.username)) {
                    callback()
                } else {
                    callback(new Error('请检查用户名格式，是否正确'))
                }
            }
        }


        return{
            form:{
                username:null,
                password:null
            },
            isRemember:false,
            isload:false,
            rules:{
                username:[
                    { validator: validUsername, trigger: 'blur' }
                ],
                password:[
                    { validator: validPassword, trigger: 'blur' }
                ]
            },
            pwdKey:'A2EB63B71DEA4B273AAFA4BA332A01EB',
            userKey:'678477FBED35FE215D719454EC6340B2'
        }
    },
    mounted(){
        this.setRememberInfo()
    },
    watch:{
        $route: {
            handler: function(route) {
                const query = route.query
                if (query) {
                    this.redirect = query.redirect
                    this.otherQuery = this.getOtherQuery(query)
                }
            },
            immediate: true
        }
    },
    methods:{
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                acc[cur] = query[cur]
                }
                return acc
            }, {})
        },
        handleSubmit(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    if(process.env.NODE_ENV=='production') this.CheckUserLogin()
                    else this.DebugLogin()
                }
            })
        },
        DebugLogin(){
            this.$store.dispatch('login/DebugLogin', this.form).then(res=>{
                this.rememberPwd()
                this.$router.addRoutes(res)
                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            })
        },
        CheckUserLogin(){

        },
        rememberPwd(){
            if( this.isRemember ){
                localStorage.setItem(this.userKey,Encrypt(this.form.username))
                localStorage.setItem(this.pwdKey,Encrypt(this.form.password))
            }else{
                localStorage.clear()
            }
        },
        setRememberInfo(){
            let self = this;
            if(localStorage.getItem(self.userKey)) {
                this.form.username = Decrypt(localStorage.getItem(self.userKey));
                this.isRemember = true;
            }
            if(localStorage.getItem(self.pwdKey)){
                this.form.password = Decrypt(localStorage.getItem(self.pwdKey));
                this.isRemember = true;
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.Login_Container{
    width: 100vw;
    height: 100vh;
    background: url('../../assets/login_bg.png') no-repeat;
    background-size:100% 100%;
    position: relative;
    .form_div{
        position: absolute;
        left: 50%;
        top: 40%;
        width: 360px;
        transform: translate(-50%, -50%);
        background: #fff;
        border-radius: 5px;
        .content {
            .tips {
                color: #868686;
                font-size: 0.6rem;
                margin-top: 0.5rem;
                margin-left: 1rem;
            }
            .warp {
                margin-top: 1rem;
                padding: 0 2.3rem;
                margin-bottom: 2.5rem;
            }
        }
    }
    .login_form /deep/ {
        .el-form-item__label{
            line-height: 1;
            padding: 6px;
            color: #a1a1a1;
        }
        .el-form-item {
            margin-bottom: 16px;
        }
        .el-input__inner{
            border-radius: 0;
            height: 38px;
            line-height: 38px;
        }
    }
    .remember /deep/ {
        .el-form-item__content{
            margin-top: 2px;
            line-height: 1;
        }
    }
    .login_btn{
        width: 100%;
    }
}
</style>